<head><meta name="viewport" content="user-scalable=no,initial-scale=1,maximum-scale=1">
<meta charset=utf-8>
<style>
body { margin: 0px; }
canvas { width:100%; height:100%; overflow: hidden; }
</style>
<script type="text/javascript" src="../h3du_min.js"></script>
<script type="text/javascript" src="../extras/camera.js"></script>
<script type="text/javascript" src="../extras/frame.js"></script>
<script type="text/javascript" src="demoutil.js"></script>
<script type="text/javascript" src="../extras/meshjson.js"></script>
<script src="https://peteroupc.github.io/colorpicker/cbox.js"></script>
</head>
<body>
<p style="position:absolute;left:0;top:1em">
<a href="javascript:sampleShape(0)">Sphere</a>,
<a href="javascript:sampleShape(1)">Cylinder</a>,
<a href="javascript:sampleShape(2)">Closed cylinder</a>,
<a href="javascript:sampleShape(3)">Torus</a>,
<a href="javascript:sampleShape(4)">Capsule</a>,
<a href="javascript:sampleShape(5)">Box</a>,
<a href="javascript:sampleShape(6)">Cone</a>,
<a href="javascript:sampleShape(7)">Disk</a>,
<a href="javascript:sampleShape(8)">Partial Disk</a>,
<a href="javascript:sampleShape(9)">5-Pointed Star</a>,
<a href="javascript:sampleShape(10)">10-Pointed Star</a>,
<br>
Color: <input type=color value="#E0E0E0" id=colorsetting>
</p>
<canvas id=canvas></canvas>
<script id="demo">
/* global H3DU, makeAxisLines */
// <!--
/*
 Any copyright to this file is released to the Public Domain.
 http://creativecommons.org/publicdomain/zero/1.0/
 If you like this, you should donate
 to Peter O. (original author of
 the Public Domain HTML 3D Library) at:
 http://peteroupc.github.io/
*/

function createSampleShape(index) {
  "use strict";
  switch(index) {
  case 0:
    return H3DU.Meshes.createSphere(1);
  case 1:
    return H3DU.Meshes.createCylinder(0.5, 0.5, 1);
  case 2:
    return H3DU.Meshes.createClosedCylinder(0.5, 0.5, 1);
  case 3:
    return H3DU.Meshes.createTorus(0.25, 1, 16, 64);
  case 4:
    return H3DU.Meshes.createCapsule(1, 1);
  case 5:
    return H3DU.Meshes.createBox(1, 1, 1);
  case 6:
    return H3DU.Meshes.createCylinder(1, 0, 2);
  case 7:
    return H3DU.Meshes.createDisk(0.4, 1);
  case 8:
    return H3DU.Meshes.createPartialDisk(0.2, 1, 32, 1, 20, 150);
  case 9:
    return H3DU.Meshes.createPointedStar(5, 1.0, 0.5);
  case 10:
    return H3DU.Meshes.createPointedStar(10, 1.0, 0.5);
  default:
    return new H3DU.MeshBuffer();
  }
}
var sub = null,
  shape = null;
function sampleShape(num) {
  "use strict";
  if(shape)sub.removeShape(shape);
  var cs = document.getElementById("colorsetting").value;
  sub.addShape(shape = new H3DU.Shape(createSampleShape(num)).setColor(cs));
}
  // Create the 3D scene; find the HTML canvas and pass it
  // to Scene3D.
var scene = new H3DU.Scene3D(document.getElementById("canvas"))
   .setClearColor("white");
sub = new H3DU.Batch3D();
var input = new H3DU.InputTracker(scene.getCanvas());
var camera = new H3DU.Camera(sub, 45, 1, 1000).setDistance(5)
    .moveAngleVertical(-90);
var pc = new H3DU.FrameCounterDiv();
shape = null;
document.getElementById("colorsetting").addEventListener("change",
   function(e) {
     "use strict";
     if(shape)shape.setColor(e.target.value);
   });
sub.addShape(makeAxisLines());
sampleShape(0);
H3DU.renderLoop(function() {
  "use strict";
  camera.update(input.update());
  sub.getLights().setDirectionalLight(0, camera.getPosition());
  pc.update();
  scene.render(sub);
});
// -->
</script>
</body>
